<template>
  <view class="page">
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" interval="3000" duration="5000"
      indicator-color="rgba(0,0,0,0.3)" indicator-active-color="#FF0000" :vertical="false"
      @transition="eventTransition">
      <swiper-item>
        <image src="//vueshop.glbuys.com/uploadfiles/1484285302.jpg"></image>
      </swiper-item>
      <swiper-item>
        <image src="//vueshop.glbuys.com/uploadfiles/1484285334.jpg"></image>
      </swiper-item>
      <swiper-item>
        <image src="//vueshop.glbuys.com/uploadfiles/1524206455.jpg"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods: {
      eventTransition(e) {
        console.log(e.detail.dx, e.detail.dy)
      }
    }
  }
</script>

<style lang="scss">
  .page {
    width: 100%;
    height: 100vh;
  }

  .swiper {
    width: 100%;
    height: 400rpx;
  }

  .swiper image {
    width: 100%;
    height: 100%;
  }
</style>